<template>
	<u-card
		margin="20rpx 2px"
		padding="10"
		:border="true"
		:head-border-bottom="false"
		:body-style="{
			paddingTop: 0
		}"
	>
		<template #head>
			<view class="title-box" @click="jumpToDetail">
				<view class="image-box">
					<up-image :show-loading="true" :src="props.item.avatarLink" :width="48" height="48" shape="circle" />
					<view v-if="props.item.lastOnlineTime" class="is-online"></view>
				</view>
				<view class="title-content-box">
					<view class="title-content-box-top">
						<view class="title-username-box">
							<u-text :bold="true" :size="17" color="#000100" :text="props.item.username"></u-text>
						</view>
						<up-image v-if="props.item.gender" :show-loading="true" :src="`/static/common/${props.item.gender.toLowerCase()}-icon.png`" width="16" height="16" />
						<view v-if="props.item.identity" class="title-tag-container">
							<up-tag size="mini" shape="circle" :text="roleType[props.item.identity]" bgColor="#FFECE0" color="#E97A34" borderColor="#FFECE0"></up-tag>
						</view>
					</view>
					<view class="title-content-box-bottom">
						<u-text v-if="props.item.lastOnlineTime" :size="12" color="#777777" text="在线"></u-text>
						<u-text v-else :size="12" color="#777777" text="离线"></u-text>
					</view>
				</view>
				<view class="icon-box">
					<up-icon name="/static/common/more-icon.png" :width="17" height="17" />
				</view>
			</view>
		</template>
		<template #body>
			<view class="description-box" @click="jumpToDetail">
				<u-text :text="props.item.summary" :size="14"></u-text>
			</view>
			<view class="tag-content">
				<scroll-view class="tag-box" :show-scrollbar="false" :scroll-x="true" enable-flex>
					<view class="tag-item-box" v-for="(tagItem, index) in props.item.labels" :key="`tag_${props.item.id}_${index}`">
						<up-tag shape="circle" :text="tagItem" size="medium" bgColor="#F5F5F5" color="#666" borderColor="#F5F5F5" />
					</view>
				</scroll-view>
			</view>
			<view class="handle-box">
				<u-text color="#777777" :size="12" :text="`已做任务${props.item.doneTaskCounts} · 评价${props.item.receivedEvaluationCounts}`"></u-text>
				<view class="btn-box">
					<up-button shape="circle" color="linear-gradient( 129deg, #FB8840 0%, #FF5858 100%)" size="normal" text="邀请他" @click.self="openInviteDialog"></up-button>
				</view>
			</view>
		</template>
	</u-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Api from '@/api/index';
import type { requestType } from '@/utils/request';
import { RoleType } from '@/utils/constant';

defineOptions({
	name: 'RecommendListItem'
});

interface PropsType {
	item: API.SolverListResponse;
	index: number;
}

const props = defineProps<PropsType>();

const emit = defineEmits<{
	(e: 'setHandle', handleObj: changeHandleType): void;
}>();

const roleType = ref(RoleType);

// 处理收藏、点赞的request返回值类型
type handleType = Promise<requestType<API.CollectResponse>> | Promise<requestType<API.LikeResponse>> | null;

// 格式化并计算剩余时间
const format = (endTime: Date) => {
	const now = new Date();
	const end = new Date(endTime);
	const diff = end.getTime() - now.getTime();
	const days = Math.floor(diff / (24 * 3600 * 1000));
	const hours = Math.floor((diff % (24 * 3600 * 1000)) / (3600 * 1000));
	const minutes = Math.floor((diff % (3600 * 1000)) / (60 * 1000));
	const seconds = Math.floor((diff % (60 * 1000)) / 1000);

	if (days > 0) {
		if (hours > 0) {
			return `${days}天${hours}小时`;
		} else {
			return `${days}天${minutes}分钟`;
		}
	} else {
		if (hours > 0) {
			return `${hours}小时${minutes}分钟`;
		} else {
			return `${minutes}分钟${seconds}秒`;
		}
	}
};

// 跳转到详情
const jumpToDetail = () => {
	const detailItem = props.item;
	uni.navigateTo({
		url: `/seeker/home-detail/index?id=${detailItem.id}`
	});
};

// 打开邀请对话框
const openInviteDialog = () => {
	console.log(111)
};
</script>

<style lang="scss" scoped>
.title-box,
.tag-content {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.image-box {
	width: 50px;
	position: relative;
	margin-right: $base-margin-10;
	overflow: hidden;

	.is-online {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: rgba(43, 229, 151, 1);
		border: 2px solid #fff;
	}
}

.title-content-box {
	width: calc(100% - 50px);
	&-top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: $base-margin-5;
		width: calc(100% - 25px);
		margin-bottom: $base-margin-5;
		white-space: nowrap;
	}
	&-bottom {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: $base-margin-5;
	}
}

.icon-box {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.title-tag-container {
	overflow: hidden;
}

.title-tag-box {
	width: 100%;
}

.tag-box {
	width: calc(100% - 80px);
	white-space: nowrap;
	padding: 20rpx 0 0;
}

.tag-item-box {
	display: inline-block;
	margin-left: 15rpx;
	&:nth-child(1) {
		margin-left: 0;
	}
}

.description-box {
	width: 100%;
	margin-top: 10rpx;
}

.location-box {
	width: 80px;
}

@mixin w100-mt10 {
	width: 100%;
	margin-top: 10rpx;
}

.handle-box {
	@include w100-mt10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	.btn-box {
		width: 80px;
	}
}
</style>
